<template>
  <div class="wp">
      <div class="content">
          <div class="content-up">
              <ul>
                  <li>
                      <div class="remai">
                          <p>内蒙古草原<span>羔羊羊肉精</span></p>
                          <img src="@/assets/images/up1.jpg" alt="">
                      </div>
                  </li>
                  <li>
                      <div class="xinpin">
                          <p>新西兰柠檬<span>鲜橙靓皮 柠香清新</span></p>
                          <img src="@/assets/images/up2.jpg" alt="">
                      </div>
                  </li>
                  <li>
                      <div class="remai">
                          <p>内蒙古草原<span>羔羊羊肉精</span></p>
                          <img src="@/assets/images/up1.jpg" alt="">
                      </div>
                  </li>
                  <li>
                      <div class="xinpin">
                          <p>新西兰柠檬<span>鲜橙靓皮 柠香清新</span></p>
                          <img src="@/assets/images/up2.jpg" alt="">
                      </div>
                  </li>
              </ul>
          </div>
          <!-- 中间部分 -->
          <div class="djs">
              <div class="djs-bg">
                  <h3>礼拜五<span>Firiday</span></h3>
                  <div>
                        距离开始
                        <div id="djs" class="djss">
                            <span id="t"></span>
                            <span id="s"></span>:
                            <span id="f"></span>:
                            <span id="m"></span>
                        </div>
                        <span>
                            <p>更多></p>
                        </span>
                  </div>
              </div>
          </div>
          <div class="lunbo">
              <swiper class="swiper" :options="swiperOption">
                <swiper-slide>
                    <div class="swibg">
                        <img src="@/assets/images/lb1.jpg" alt="">
                        <p>新西兰佳沛黄金奇异果<span>6个装</span></p>
                        <h3>礼拜五价：<span>￥28.80</span></h3>
                    </div>
                </swiper-slide>
                <swiper-slide>
                    <div class="swibg">
                        <img src="@/assets/images/lb1.jpg" alt="">
                        <p>新西兰佳沛黄金奇异果<span>6个装</span></p>
                        <h3>礼拜五价：<span>￥28.80</span></h3>
                    </div>
                </swiper-slide>
                <swiper-slide>
                    <div class="swibg">
                        <img src="@/assets/images/lb1.jpg" alt="">
                        <p>新西兰佳沛黄金奇异果<span>6个装</span></p>
                        <h3>礼拜五价：<span>￥28.80</span></h3>
                    </div>
                </swiper-slide>
                <swiper-slide>
                    <div class="swibg">
                        <img src="@/assets/images/lb1.jpg" alt="">
                        <p>新西兰佳沛黄金奇异果<span>6个装</span></p>
                        <h3>礼拜五价：<span>￥28.80</span></h3>
                    </div>
                </swiper-slide>
                <swiper-slide>
                    <div class="swibg">
                        <img src="@/assets/images/lb1.jpg" alt="">
                        <p>新西兰佳沛黄金奇异果<span>6个装</span></p>
                        <h3>礼拜五价：<span>￥28.80</span></h3>
                    </div>
                </swiper-slide>
                <swiper-slide>
                    <div class="swibg">
                        <img src="@/assets/images/lb1.jpg" alt="">
                        <p>新西兰佳沛黄金奇异果<span>6个装</span></p>
                        <h3>礼拜五价：<span>￥28.80</span></h3>
                    </div>
                </swiper-slide>
                <swiper-slide>
                    <div class="swibg">
                        <img src="@/assets/images/lb1.jpg" alt="">
                        <p>新西兰佳沛黄金奇异果<span>6个装</span></p>
                        <h3>礼拜五价：<span>￥28.80</span></h3>
                    </div>
                </swiper-slide>
                <swiper-slide>
                    <div class="swibg">
                        <img src="@/assets/images/lb1.jpg" alt="">
                        <p>新西兰佳沛黄金奇异果<span>6个装</span></p>
                        <h3>礼拜五价：<span>￥28.80</span></h3>
                    </div>
                </swiper-slide>
                <swiper-slide>
                    <div class="swibg">
                        <img src="@/assets/images/lb1.jpg" alt="">
                        <p>新西兰佳沛黄金奇异果<span>6个装</span></p>
                        <h3>礼拜五价：<span>￥28.80</span></h3>
                    </div>
                </swiper-slide>
                <swiper-slide>
                    <div class="swibg">
                        <img src="@/assets/images/lb1.jpg" alt="">
                        <p>新西兰佳沛黄金奇异果<span>6个装</span></p>
                        <h3>礼拜五价：<span>￥28.80</span></h3>
                    </div>
                </swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
          </div>
          <!-- 商品展示 -->
          <div class="shangpin">
              <!-- 水果 -->
              <div class="shangpin-bg">
                  <div class="spup">
                      <h2 class="sg">
                          新鲜水果
                          <span>采自新疆优质水果生产基地，品质一流</span>
                      </h2>
                      <p>更多></p>
                  </div>
              </div>
              <ul>
                  <li>
                      <img src="@/assets/images/sp1.jpg" alt="">
                      <p>新西兰佳沛黄金奇异果<span>果肉绵密、花蜜般的甘甜百吃不厌</span></p>
                      <h2>
                          <span>￥28.80<p>￥40.00</p></span>
                          <img src="@/assets/images/gwc.jpg" alt="">
                      </h2>
                  </li>
                  <li>
                      <img src="@/assets/images/sp1.jpg" alt="">
                      <p>新西兰佳沛黄金奇异果<span>果肉绵密、花蜜般的甘甜百吃不厌</span></p>
                      <h2>
                          <span>￥28.80<p>￥40.00</p></span>
                          <img src="@/assets/images/gwc.jpg" alt="">
                      </h2>
                  </li>
                  <li>
                      <img src="@/assets/images/sp1.jpg" alt="">
                      <p>新西兰佳沛黄金奇异果<span>果肉绵密、花蜜般的甘甜百吃不厌</span></p>
                      <h2>
                          <span>￥28.80<p>￥40.00</p></span>
                          <img src="@/assets/images/gwc.jpg" alt="">
                      </h2>
                  </li>
                  <li>
                      <img src="@/assets/images/sp1.jpg" alt="">
                      <p>新西兰佳沛黄金奇异果<span>果肉绵密、花蜜般的甘甜百吃不厌</span></p>
                      <h2>
                          <span>￥28.80<p>￥40.00</p></span>
                          <img src="@/assets/images/gwc.jpg" alt="">
                      </h2>
                  </li>
              </ul>
              <!-- 水产 -->
              <div class="shangpin-bg">
                  <div class="spup">
                      <h2 class="sg1">
                          水产海鲜
                          <span>国内外新鲜到港的鱼虾蟹贝，我们全都有</span>
                      </h2>
                      <p>更多></p>
                  </div>
              </div>
              <ul>
                  <li>
                      <img src="@/assets/images/sc1.jpg" alt="">
                      <p>新西兰佳沛黄金奇异果<span>果肉绵密、花蜜般的甘甜百吃不厌</span></p>
                      <h2>
                          <span>￥28.80<p>￥40.00</p></span>
                          <img src="@/assets/images/gwc.jpg" alt="">
                      </h2>
                  </li>
                  <li>
                      <img src="@/assets/images/sc1.jpg" alt="">
                      <p>新西兰佳沛黄金奇异果<span>果肉绵密、花蜜般的甘甜百吃不厌</span></p>
                      <h2>
                          <span>￥28.80<p>￥40.00</p></span>
                          <img src="@/assets/images/gwc.jpg" alt="">
                      </h2>
                  </li>
                  <li>
                      <img src="@/assets/images/sc1.jpg" alt="">
                      <p>新西兰佳沛黄金奇异果<span>果肉绵密、花蜜般的甘甜百吃不厌</span></p>
                      <h2>
                          <span>￥28.80<p>￥40.00</p></span>
                          <img src="@/assets/images/gwc.jpg" alt="">
                      </h2>
                  </li>
                  <li>
                      <img src="@/assets/images/sc1.jpg" alt="">
                      <p>新西兰佳沛黄金奇异果<span>果肉绵密、花蜜般的甘甜百吃不厌</span></p>
                      <h2>
                          <span>￥28.80<p>￥40.00</p></span>
                          <img src="@/assets/images/gwc.jpg" alt="">
                      </h2>
                  </li>
              </ul>
              <!-- 肉类 -->
              <div class="shangpin-bg">
                  <div class="spup">
                      <h2 class="sg2">
                          肉类禽蛋
                          <span>采自新疆优质水果生产基地，品质一流</span>
                      </h2>
                      <p>更多></p>
                  </div>
              </div>
              <ul>
                  <li>
                      <img src="@/assets/images/rl1.jpg" alt="">
                      <p>新西兰佳沛黄金奇异果<span>果肉绵密、花蜜般的甘甜百吃不厌</span></p>
                      <h2>
                          <span>￥28.80<p>￥40.00</p></span>
                          <img src="@/assets/images/gwc.jpg" alt="">
                      </h2>
                  </li>
                  <li>
                      <img src="@/assets/images/rl1.jpg" alt="">
                      <p>新西兰佳沛黄金奇异果<span>果肉绵密、花蜜般的甘甜百吃不厌</span></p>
                      <h2>
                          <span>￥28.80<p>￥40.00</p></span>
                          <img src="@/assets/images/gwc.jpg" alt="">
                      </h2>
                  </li>
                  <li>
                      <img src="@/assets/images/rl1.jpg" alt="">
                      <p>新西兰佳沛黄金奇异果<span>果肉绵密、花蜜般的甘甜百吃不厌</span></p>
                      <h2>
                          <span>￥28.80<p>￥40.00</p></span>
                          <img src="@/assets/images/gwc.jpg" alt="">
                      </h2>
                  </li>
                  <li>
                      <img src="@/assets/images/rl1.jpg" alt="">
                      <p>新西兰佳沛黄金奇异果<span>果肉绵密、花蜜般的甘甜百吃不厌</span></p>
                      <h2>
                          <span>￥28.80<p>￥40.00</p></span>
                          <img src="@/assets/images/gwc.jpg" alt="">
                      </h2>
                  </li>
              </ul>
              <!-- 蛋奶 -->
              <div class="shangpin-bg">
                  <div class="spup">
                      <h2 class="sg3">
                          奶蛋素食
                          <span>采自新疆优质水果生产基地，品质一流</span>
                      </h2>
                      <p>更多></p>
                  </div>
              </div>
              <ul>
                  <li>
                      <img src="@/assets/images/dn1.jpg" alt="">
                      <p>新西兰佳沛黄金奇异果<span>果肉绵密、花蜜般的甘甜百吃不厌</span></p>
                      <h2>
                          <span>￥28.80<p>￥40.00</p></span>
                          <img src="@/assets/images/gwc.jpg" alt="">
                      </h2>
                  </li>
                  <li>
                      <img src="@/assets/images/dn1.jpg" alt="">
                      <p>新西兰佳沛黄金奇异果<span>果肉绵密、花蜜般的甘甜百吃不厌</span></p>
                      <h2>
                          <span>￥28.80<p>￥40.00</p></span>
                          <img src="@/assets/images/gwc.jpg" alt="">
                      </h2>
                  </li>
                  <li>
                      <img src="@/assets/images/dn1.jpg" alt="">
                      <p>新西兰佳沛黄金奇异果<span>果肉绵密、花蜜般的甘甜百吃不厌</span></p>
                      <h2>
                          <span>￥28.80<p>￥40.00</p></span>
                          <img src="@/assets/images/gwc.jpg" alt="">
                      </h2>
                  </li>
                  <li>
                      <img src="@/assets/images/dn1.jpg" alt="">
                      <p>新西兰佳沛黄金奇异果<span>果肉绵密、花蜜般的甘甜百吃不厌</span></p>
                      <h2>
                          <span>￥28.80<p>￥40.00</p></span>
                          <img src="@/assets/images/gwc.jpg" alt="">
                      </h2>
                  </li>
              </ul>
          </div>
      </div>
  </div>

</template>

<script>
 import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
 import 'swiper/css/swiper.css'

var showtime = function () {
    var nowtime = new Date(),  //获取当前时间
        endtime = new Date("2021/6/25");  //定义结束时间
    var lefttime = endtime.getTime() - nowtime.getTime(),  //距离结束时间的毫秒数
        leftd = Math.floor(lefttime/(1000*60*60*24)),  //计算天数
        lefth = Math.floor(lefttime/(1000*60*60)%24),  //计算小时数
        leftm = Math.floor(lefttime/(1000*60)%60),  //计算分钟数
        lefts = Math.floor(lefttime/1000%60);  //计算秒数
    return leftd + "天"   //返回倒计时的字符串 + lefth + ":" + leftm + ":" + lefts;
}
var xiaoshi = function () {
    var nowtime = new Date(),  //获取当前时间
        endtime = new Date("2021/6/25");  //定义结束时间
    var lefttime = endtime.getTime() - nowtime.getTime(),  //距离结束时间的毫秒数
        leftd = Math.floor(lefttime/(1000*60*60*24)),  //计算天数
        lefth = Math.floor(lefttime/(1000*60*60)%24),  //计算小时数
        leftm = Math.floor(lefttime/(1000*60)%60),  //计算分钟数
        lefts = Math.floor(lefttime/1000%60);  //计算秒数
    return lefth   //返回倒计时的字符串 + lefth + ":" + leftm + ":" + lefts;
}
var fen = function () {
    var nowtime = new Date(),  //获取当前时间
        endtime = new Date("2021/6/25");  //定义结束时间
    var lefttime = endtime.getTime() - nowtime.getTime(),  //距离结束时间的毫秒数
        leftd = Math.floor(lefttime/(1000*60*60*24)),  //计算天数
        lefth = Math.floor(lefttime/(1000*60*60)%24),  //计算小时数
        leftm = Math.floor(lefttime/(1000*60)%60),  //计算分钟数
        lefts = Math.floor(lefttime/1000%60);  //计算秒数
    return leftm   //返回倒计时的字符串 + lefth + ":" + leftm + ":" + lefts;
}
var miao = function () {
    var nowtime = new Date(),  //获取当前时间
        endtime = new Date("2021/6/25");  //定义结束时间
    var lefttime = endtime.getTime() - nowtime.getTime(),  //距离结束时间的毫秒数
        leftd = Math.floor(lefttime/(1000*60*60*24)),  //计算天数
        lefth = Math.floor(lefttime/(1000*60*60)%24),  //计算小时数
        leftm = Math.floor(lefttime/(1000*60)%60),  //计算分钟数
        lefts = Math.floor(lefttime/1000%60);  //计算秒数
    return lefts   //返回倒计时的字符串 + lefth + ":" + leftm + ":" + lefts;
}

setInterval (function () {
    t.innerHTML = showtime();
}, 1000);  
setInterval (function () {
    s.innerHTML = xiaoshi();
}, 1000);
setInterval (function () {
    f.innerHTML = fen();
}, 1000);
setInterval (function () {
    m.innerHTML = miao();
}, 1000);
export default {
    name: 'Sycontent',
    title: 'Multiple slides per view',
    components: {
      Swiper,
      SwiperSlide
    },
    data() {
      return {
        swiperOption: {
          slidesPerView: 4,
          spaceBetween: 30,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          }
        }
      }
    }
}
</script>

<style scoped>
/* 轮播上方 */
.djs{
    background: url(./img/libg.png);
    height: 100px;
    margin-top: 20px;
}
.djs .djs-bg{
    display: flex;
    justify-content: space-between

}
.djs-bg>h3{
    background: url(./img/djs.jpg) no-repeat 30px 50% ;
    height: 100px;
    text-align: left;
    padding-left: 90px;
    line-height: 100px;
    font-size: 30px;
    color: #498e3d;
    font-weight: 100;
}
.djs-bg>h3 span{
    font-size: 24px;
    color: #999;
    margin-left: 20px;
}
.djs-bg>div{
    height: 100px;
    line-height: 100px;
    margin-right: 30px;
    display: flex;
    color: #498e3d;
    font-size: 24px;
    font-weight: 100;
}
.djs-bg>div span{
    font-size: 18px;
    color: #666;
}
.djs-bg div .djss{
    display: flex;
    width: 300px;
    color: #000;
}
.djs-bg div .djss>span{
    margin-top: 30px;
    width: 50px;
    height: 40px; 
    font-size: 20px;
    color: #fff;
    border-radius: 3px;
    background: #f08200;
    line-height: 40px;
    margin-left: 10px;
    text-align: center;
    margin-right: 10px;
}



/* 轮播 */
.lunbo{
    width: 1280px;
    height: 520px;
    margin-top: 20px;
}
.swiper{
    width: 1280px;
    height: 500px;
}
.swiper-pagination{
    margin-top: 20px;
}
.swibg{
    background: #f8f6f7;
    height: 430px;
    cursor: pointer;
}
.swibg img{
    width: 100%;
    height: 300px;
}
.swibg>p{
    margin: 0 auto;
    text-align: center;
    line-height: 25px;
    color: #333;
    font-size: 18px;
}
.swibg>p span{
    display: block;
    color: #666;
}
.swibg h3{
    color: #f08200;
    font-size: 18px;
    font-weight: 100;
    margin: 0 auto;
    margin-top: 20px;
    text-align: center;
}
.swibg h3 span{
    font-size: 24px;
    color: #ff5757;
}


/*  */
.wp{
    width: 1280px;
    margin: 0 auto;
}
.content-up{
    margin-top: 100px;
    width: 1280px;
    text-align: left;
}
.content-up ul{
    text-align: left;
    display: flex;
    flex-wrap: nowrap;
    /* border: 1px #f00 solid; */
    justify-content: space-between;
}
.content-up ul li{
    width: 305px;
    height: 140px;
    background: #f2f2f2;
    cursor: pointer;
}
.content-up ul li .remai{
    background: url(./img/remai.jpg) no-repeat;
    display: flex;
    justify-content: space-between;
    margin-right: 20px;
}
.content-up ul li .xinpin{
    background: url(./img/xinpin.jpg) no-repeat;
    display: flex;
    justify-content: space-between;
    margin-right: 20px;
}
.content-up ul li div p span{
    display: block;
    margin-top: 8px;
}
.content-up ul li div p{
    margin-top: 50px;
    margin-left: 30px;
    font-size: 20px;
    color: #333;
}
.content-up ul li .xinpin p span{
    color: #666;
    font-size: 16px;
}
.content-up ul li div img{
    width: 120;
    height: 80px;
    margin-top: 25px;

}
/* 上方结束 */
.shangpin-bg{
    margin: 0 auto;
    width: 1280px;
    height: 100px;
    background: url(./img/libg.png) no-repeat;
    background-size: contain;
    margin-top: 20px;
    border-bottom: 1px #6ea865 solid;
}
.shangpin ul{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}
.shangpin ul li{
    border: 1px #ececec solid;
}
.shangpin ul li>img{
    width: 261px;
    height: 253px;
}
.shangpin ul li span{
    display: block;
}
.shangpin ul li p span{
    margin-top: 5px;
}
.shangpin ul li p{
    margin-left: 10px;
}
.shangpin ul li h2{
    display: flex;
    font-size: 24px;
    color: #ff5757;
    font-weight: 600;
    justify-content: space-between;
    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.shangpin ul li h2 span{
    display: flex;
}
.shangpin ul li h2 span p{
    font-size: 18px;
    color: #666;
    line-height: 30px;
    font-weight: 100;
    margin-left: 10px;
    text-decoration: line-through;
}
.shangpin ul li h2 img{
    margin-right: 30px;
    cursor: pointer;
}
.spup{
    display: flex;
    justify-content: space-between
}
.spup h2{
    height: 100px;
    line-height: 100px;
    padding-left: 95px;
    font-size: 30px;
    color: #498e3d;
    font-weight: 200;
}
.spup .sg{
    background: url(./img/sglogo.jpg) no-repeat 30px 50% ;
}
.spup .sg1{
    background: url(./img/hxlogo.jpg) no-repeat 30px 50% ;
}
.spup .sg3{
    background: url(./img/dnlogo.jpg) no-repeat 30px 50% ;
}
.spup .sg4{
    background: url(./img/rllogo.jpg) no-repeat 30px 50% ;
}
.spup .sg span{
    font-size: 24px;
    color: #999;
}
.spup p{
    height: 100px;
    line-height: 100px;
    margin-right: 30px;
    font-size: 18px;
    color: #666;
    cursor: pointer;
}
</style>